//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');
//浏览器的渲染原理:在每一个渲染关键帧中需要重新绘制canvas动画
let step = 1;
let startX = 0;
let startY = 100;
function draw() {
  if (startX >= 500) {
    return;
  }
  ctx.clearRect(0, 0, 500, 300);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(startX + 50, startY);
  ctx.stroke();
  startX += step;
  requestAnimationFrame(draw);
}
draw();
